<script lang="ts" setup>
import { LocalStoreArrType } from "@/typing";
import { ref } from "vue";
import { useRouter } from 'vue-router'
import { getMAndDObj, getChineseMouth } from "@/utils/data-tools";
import { localStoriesStore, userLocalStoriesStore } from "../../store";
import { Toast } from 'vant';
import 'vant/es/toast/style';

const router = useRouter()
const userStore = userLocalStoriesStore();
const { updateIsShowUser } = userStore;

const localStore = localStoriesStore();
const { getHpCollectList } = localStore;

const collectList = ref<LocalStoreArrType>();
collectList.value = getHpCollectList();

Toast.loading({
    message: '正在加载...',
    forbidClick: true,
});

function goBackFunc() {
    updateIsShowUser(false);
    router.push({ name: 'user' });
}

function getTimeData(str: string) {
    let date = new Date(str.substring(0, 10));
    let obj = getMAndDObj(date);
    return obj.d + ' ' + getChineseMouth(Number(obj.m)) + ' ' + obj.y;
}

</script>

<template>
    <div class="h-screen">
        <div class="p-5 flex items-center bg-white border-b">
            <img class="w-6 h-10" src="@/assets/card/h5_qr_back.png" alt="back" @click="goBackFunc">
            <div class="text-center text-2xl w-11/12 ">收藏</div>
        </div>
        <img v-show="(collectList?.length == 0 || collectList == undefined)" class="w-64 mt-32 ml-48"
            src="@/assets/user/no_stow_pic.png" alt="img">

        <div v-show="(collectList?.length != 0)" class="flex flex-wrap p-3">
            <div v-for="l in collectList" :key="l.id" class="hp-width rounded-xl shadow">
                <div class="relative ">
                    <img class="rounded-t-xl" :src="l.img_url" alt="img ">
                    <div class="absolute bottom-2 text-white left-3 ">{{ l.volume }}</div>
                    <div class="absolute bottom-2 text-white right-3 ">{{ getTimeData(l.post_date) }}</div>
                </div>
                <div class=" w-full p-3  bg-white rounded-b-xl">
                    <div class="subtotal-content text-gray-500">{{ l.forward }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<style>
.hp-width {
    width: 45%;
    margin: 8px;
}

.subtotal-content {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
</style>